<template>
  <div class="w1200 profession">
    <div class="top">
      <img :src="baseUrl+'/image?fileName='+info.photo" class="avatar" alt="">
      <div class="flex1">
        <p class="flex_box">
          <span class="name">{{info.name}}</span>
          <i class="post">{{info.education}}</i>
        </p>
        <div class="tags">
          <span v-for="item in serviceList">{{item}}</span>
        </div>
        <div class="info flex_box">
          <span class="iconfont icon-xueli"></span>
          <span>{{info.education}}</span>
        </div>
        <div class="info flex_box">
          <span class="iconfont icon-zuoji"></span>
          <span>{{info.fax}}</span>
        </div>
        <div class="info flex_box">
          <span class="iconfont icon-dianhuatianchong"></span>
          <span>{{info.phone}}</span>
        </div>
        <div class="info flex_box">
          <span class="iconfont icon-youxiang-"></span>
          <span>{{info.email}}</span>
        </div>
        <div class="info flex_box">
          <span class="iconfont icon-weizhi"></span>
          <span>{{info.address}}</span>
        </div>
      </div>
    </div>
    <div v-html="info.contents" class="professionalDetails"></div>
    <!-- <div class="singlePage">
      <div class="list" v-for="item in list">
        <span class="title">{{item.title}}</span>
        <div class="main flex1">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in item.children"
              :key="index">
              <p class="con">{{activity.content}}</p>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      id:'',
      info:'',
      serviceList:[]
    }
  },
  mounted() {
    this.id = this.$route.params.id
    this.getInfo()
  },
  methods:{
    getInfo() {
      this.$api.getProfessionalDetail({id:this.id}).then(res=>{
        this.info = res.data.professional
        this.serviceList = res.data.serviceList
      })
    },
  }
}
</script>
<style>
  .professionalDetails img{
    max-width: 100%;
  }
</style>
<style lang='stylus' scoped>
@import '~@/assets/stylus/variable'
  .profession
    box-shadow 0 0 8px 4px rgba(0,0,0,.1)
    .top
      display flex
      padding 40px
      background: #f4f4f4
      font-size 16px
      .avatar
        width: 300px
        margin-right: 50px
      .name
        font-size 30px
      .post
        font-style normal
        font-size 16px
        margin-left: 20px
      .tags
        margin 30px 0 20px 0
        display: flex
        flex-wrap: wrap
        span
          background: #fff
          padding 8px 10px
          margin 0 10px 10px 0
      .info
        padding 20px 0
        border-bottom 1px dashed #bbb
        .iconfont 
          margin-right: 10px
          color $theme-color
    .singlePage
      padding 40px
      background: #fff
      .list
        display flex
        margin-bottom 30px
        .title
          font-size 24px
          width: 200px
        .con
          padding-top 4px
          font-size 16px
    .professionalDetails
      overflow: hidden
      padding 40px
      background: #fff
</style>